<template>
  <div id="orderlist" class="containner">
    <div class="text-left text-lg gray bold">我的订单</div>
    <div class="containner px-20 py-20 box-shadow text-xl weight gray" v-if="order_list.length == 0">
      订单暂无任何记录
    </div>
    <div v-if="order_list.length > 0" class="mt-20 px-20 py-20 rounded box-shadow" v-for="ord in order_list"
      :key="ord.id">
      <!-- 订单基本信息 -->
      <div class="flex item-center text-sm gray">
        <div>{{ord.createtime}}</div>
        <div class="ml-20">订单号：{{ord.order_no}}</div>
        <div class="ml-20">订单状态：{{order_status[ord.order_status]}}</div>
        <div class="ml-20">支付金额：{{ord.order_payamount}}</div>
      </div>
      <!-- 头 -->
      <div class="flex justify-between item-center text-md dark bg-gray px-20 py-5 cart-header mt-20">
        <div class="mx-5"></div>
        <div class="cart-product mx-5">商品</div>
        <div class="cart-param mx-5">单价</div>
        <div class="cart-param mx-5">数量</div>
        <div class="cart-param mx-5">小计</div>
        <div class="cart-param mx-5"></div>
      </div>
      <!-- 订单明细 -->
      <div v-for="detail in ord.orderDetailList" :key="detail.id"
        class="flex justify-between item-center text-md dark my-10 px-20 py-5 cart-body">
        <div class="mx-5"></div>
        <!-- 图片 -->
        <div class="cart-product mx-5 flex item-start"><img :src="base_img_url + detail.odtails_thumburl" width="80px"
            height="80px" class="rounded hand">
          <div class="cart-name mx-10 text-left flex-column justify-between item-start">
            <!-- 名字 -->
            <div class="hover-red hand ">{{detail.odtails_name}}</div>
            <div class="cart-sku flex item-center">
              <!-- 属性 -->
              <div v-for="sku in JSON.parse(detail.odtails_sku)" class="gray text-sm pr-5 hand hover-red">
                {{sku.value_name}}
              </div>
            </div>
          </div>
        </div>
        <!-- 单价 -->
        <div class="cart-param mx-5">￥{{detail.odtails_price}}</div>
        <!-- 数量 -->
        <div class="cart-param mx-5">{{detail.odtails_count}}</div>
        <!-- 小计 -->
        <div class="cart-param mx-5">￥{{detail.odtails_count * detail.odtails_price}}</div>
        <div class="cart-param mx-5 hover-red hand"></div>
      </div>
      <!-- 收货地址 -->
      <div class="flex item-center justify-end mt-20 text-sm gray">
        <div class="ml-20">收货人：{{ord.orderAddress.consignee}}</div>
        <div class="ml-20">联系电话：{{ord.orderAddress.phone}}</div>
        <div class="ml-20">配送地址：{{ord.orderAddress.province}} {{ord.orderAddress.city}} {{ord.orderAddress.district}}
          {{ord.orderAddress.address}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState('order', ['order_list', 'order_status']),
      ...mapState('product', ['base_img_url'])
    },
    methods: {
      ...mapActions('order', ['get_order_list'])
    },
    mounted() {
      //获取订单数据
      this.get_order_list();
    }
  }
</script>

<style scoped>
  @import '../assets/css/orderlist.css'
</style>
